<template>
  <div>
    <el-dialog v-model="props.visible" title="添加检查项目" width="80vw" @close="closeDialog">
      <el-form :inline="true" :model="params" size="small">
        <el-form-item label="名称：">
          <el-input size="small" v-model="params.itemsName" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="类型：">
          <el-select size="small" v-model="params.itemsType" placeholder="请选择" clearable>
            <el-option v-for="item in itemsTypeOptions" :key="item.value" :label="item.lable" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否评分：">
          <el-select size="small" v-model="params.isScore" placeholder="请选择" clearable>
            <el-option v-for="item in isScoreOPtions" :key="item.value" :label="item.lable" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类栏目：">
          <el-input size="small" v-model="params.isScore" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item label="">
          <el-button size="small" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="tableData"
        size="small"
        style="width: 100%;margin-top:20px;"
        height="350"
        ref="tableRef"
        v-loading="loading"
        :row-key="(row) => row.itemsId"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" :reserve-selection="true" width="55" />
        <el-table-column label="检查项目名称" align="center" prop="itemsName" />
        <el-table-column label="检查项目类型" align="center" prop="itemsType">
          <template #default="scope">
            <span v-if="scope.row.itemsType=='0'"> 选择项 </span>
            <span v-if="scope.row.itemsType=='1'"> 数字项 </span>
            <span v-if="scope.row.itemsType=='2'"> 文本项 </span>
            <span v-if="scope.row.itemsType=='3'"> 拍照项 </span>
          </template>
        </el-table-column>
        <el-table-column label="是否评分" align="center" prop="isScore">
          <template #default="scope">
            <span v-if="scope.row.isScore=='0'"> 否 </span>
            <span v-if="scope.row.isScore=='1'"> 是 </span>
          </template>
        </el-table-column>
        <el-table-column label="分类目录" align="center" prop="catalogueName" />
      </el-table>
      <div style="text-align: center;">
        <el-button type="primary" size="small" @click="onClickOK">确认添加</el-button>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-pagination
            v-model:current-page="params.pageNum"
            v-model:page-size="params.pageSize"
            :page-sizes="[100, 200, 300, 400]"
            size="small"
            layout="sizes, prev, pager, next, total"
            :total="params.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { inspectioninspectItemslist } from '@/api/inspection';
const props = defineProps({
  visible: { type: Boolean, default: false },
})
const loading = ref(false);
const params = ref({
itemsName: '',
itemsType: '',
isScore: '',
pageNum: 1,
pageSize: 10,
total: 0,
})
const tableRef = ref<any>(null);
//检查项目类型（0选择项 1数字项 2文本项 3拍照项）
 const itemsTypeOptions = [
  {
    lable: '选择项',
    value: '0'
  },
  {
    lable: '数字项',
    value: '1'
  },
  {
    lable: '文本项',
    value: '2'
  },
  {
    lable: '拍照项',
    value: '3'
  }
]
//是否评分（0否 1是）
const isScoreOPtions = [
  {
    lable: '否',
    value: '0'
  },
  {
    lable: '是',
    value: '1'
  }
]
const addData = ref<any[]>([]);

watch(
  () => props.visible,
  async (val) => {
    if (val) {
      tableRef.value?.clearSelection();
    }
  },
);

const tableData = ref([]);
const emit = defineEmits(['closeDialog', 'getSelectData']);
const search = () => {
  params.value.pageNum = 1;
  getList();
}

const handleSizeChange = (val: number) => {
  getList();
}
const handleCurrentChange = (val: number) => {
  getList();
}

const handleSelectionChange = (val: any[]) => {
  console.log(val)
  addData.value = val;
}

const getList = async () => {
  loading.value = true;
  const res = await inspectioninspectItemslist(params.value);
  console.log(res);
  tableData.value = toRaw(res.rows as any).map((item: any) => {
    item.checked = false;
    return item;
  }) || [];
  params.value.total = res.total;
  loading.value = false;
};

onMounted(() => {
  getList();
});
const onClickOK = () => {
  if (addData.value.length === 0) {
    return ElMessage.error('至少选择一项');
  }
  emit('getSelectData', addData.value);
}
const closeDialog = () => {
  emit('closeDialog');
}
</script>
<style lang="scss" scoped>
:deep(.el-form-item__label) {
  font-size: 12px;
}
:deep(.el-table__cell) {
  padding: 0 !important;
}
</style>
